<script>
import UniPopup from "../../../../../../uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
import { showModal, valIsEmpty } from "@/utils";
import vocabularyDetail from "../../../../../../components/vocabularyDetail.vue";
import title from "../../title.vue";
import collection from "../../collection.vue";
import common from "../../common";
import answerRecord from "../answerRecord.vue";
import analysisVideo from "../../analysisVideo.vue";
import numberUtils from "../../../../../../utils/numberUtils";
import answerSheet from "./answerSheet.vue";
import paragraphAnalysis from "./paragraphAnalysis.vue";
import controlBar from "../controlBar.vue"
export default {
  name: "paragraphCorresponding",
  components: {
    collection,
    UniPopup,
    vocabularyDetail,
    title,
    answerRecord,
    analysisVideo,
    answerSheet,
    paragraphAnalysis,
		controlBar,
  },
  data() {
    return {
      common,
      textList: [], //文章段落内容
      textQuestionList: [], //题目选项列表
      details: {}, //题目详情
      currentQuestionIndex: 0, //当前题目索引
      questionList: [], //题目列表
    };
  },
  created() {
    //初始化数据
    this.textList = this.root.details.paragraphCorresponding.textList;
    console.log(this.textList, "this.textList");
    this.details = this.root.details;
    this.textQuestionList =
      this.root.details.paragraphCorresponding.textQuestionList;
    //提取段落里面的题目
    this.questionList = [];
    for (let i = 0; i < this.textList.length; i++) {
      let textListElement = this.textList[i];
      if (textListElement.contentType === "TOPIC") {
        this.questionList.push(textListElement);
      }
      for (let j = 0; j < textListElement.contentList.length; j++) {
        const contentItem = textListElement.contentList[j];
        if (contentItem.contentType === "TOPIC") {
          this.questionList.push(contentItem);
        }
      }
    }
  },
  props: {
    viewAnalysis: Boolean,
  },
  methods: {
    //打开答题卡
    openAnswerSheet(serialNum) {
      this.$refs["answer-sheet"].open(serialNum);
    },
    //提交作答
    async submit() {
      //是否还有未做的题目
      let unAnswer = false;
      //计算总题数，答对题数，答错题数，未答题数，本次答题得分
      const userDoTopicScore = {
        totalTopicNum: this.questionList.length,
        rightTopicNum: 0,
        errorTopicNum: 0,
        noDoNum: 0,
        score: 0,
        isCalculateScore: 1, //评分
      };
      for (let item of this.questionList) {
        const question = item.topic;
        //做对了
        if (question.doRight) {
          userDoTopicScore.rightTopicNum++;
          //计算分数
          userDoTopicScore.score = numberUtils.preciseAdd(
            userDoTopicScore.score,
            question.questionScore,
          );
        } else {
          //没有做
          if (valIsEmpty(question.userAnswer)) {
            userDoTopicScore.noDoNum++;
            //做错了
          } else {
            userDoTopicScore.errorTopicNum++;
          }
        }
        //处理待提交的数据
        question.questionSerialNum = question.serialNum;
        //检查是否有未作答的题目
        if (!question.userAnswer) {
          unAnswer = true;
        }
      }
      if (unAnswer) {
        if (
          !(await showModal({
            title: "提示",
            content: "还有题目未作答，是否确认提交？",
            confirmText: "确认提交",
            cancelText: "继续作答",
          }))
        ) {
          //打开答题卡
          this.$refs["answer-sheet"].open();
          this.openAnswerRecord();
          return;
        }
      }
      //提交答案
      this.$emit("submit", {
        questionList: this.questionList.map((item) => item.topic),
        userDoTopicScore,
      });
    },
    //打开题目一览
    openAnswerRecord() {
      this.$refs.answerRecord.open(
        this.questionList.map((item) => {
          return {
            ...item,
            ...item.topic,
          };
        }),
      );
    },
    //获取题目的class样式
    getQuestionClass(question) {
      //做题模式
      if (!this.viewAnalysis) {
        if (question.topic.userAnswer) return "hasDo";
        //查看答案
      } else {
        if (question.topic.userAnswer === question.topic.answer)
          return "correct";
        return "incorrect";
      }
    },
  },
  inject: ["root"],
  provide() {
    return {
      parent: this,
    };
  },
};
</script>

<template>
  <view class="component">
    <title :topic-name="details.topicName"></title>
    <view style="font-size: 28rpx"
      >提示：你可以点击段落中的题目以弹出答题卡进行作答</view
    >
    <!--		题干-->
    <view
      class="topic-paragraph-item"
      v-if="details.topicStem"
      v-html="details.topicStem"
    >
    </view>
    <!--		文章段落内容-->
    <view class="text-list">
      <block v-for="paragraph in textList" :key="paragraph.id">
        <!--			段落题目	-->
        <view
          :class="[getQuestionClass(paragraph), 'paragraph-topic', 'topic']"
          v-if="paragraph.contentType === 'TOPIC'"
          @click="() => openAnswerSheet(paragraph.topic.serialNum)"
        >
          <text>{{ paragraph.topic.serialNum }}.</text>
          <text
            style="
              white-space: pre-wrap;
              display: inline-block;
              border-bottom: 3rpx solid var(--text-color);
              margin-left: 10rpx;
            "
            v-if="!paragraph.topic.content"
            >\t\t\t\t</text
          >
          <text v-else>{{ "\t" + paragraph.topic.content }}</text>
        </view>
        <view
          class="paragraph-item"
          :class="{ emphasis: paragraph.contentType === 'TITLE' }"
        >
          <!--				段落开头缩进-->
          <text class="text" style="width: 56rpx"></text>
          <block v-for="item in paragraph.contentList" :key="item.index">
            <!--					文本类型-->
            <text
              class="text"
              v-if="item.contentType === 'TEXT'"
							@click="$refs.vocabularyDetail.open(item.content)"
              :user-select="true"
              >{{ item.content }}</text
            >
            <!--					重点词汇-->
            <text
              class="vocabulary"
              @click="$refs.vocabularyDetail.open(item.content)"
              v-else-if="item.contentType === 'MAIN_VOCABULARY'"
              >{{ item.content }}</text
            >
            <!--						题目类型-->
            <text
              :class="[getQuestionClass(item), 'topic', 'text-topic']"
              @click="$refs['answer-sheet'].open(item.topic.serialNum)"
              v-else-if="item.contentType === 'TOPIC'"
              >{{ item.content }}</text
            >
          </block>
        </view>
        <template v-if="viewAnalysis">
          <!--				段落翻译-->
          <view class="paragraph-translate" v-if="paragraph.trans">{{
            paragraph.trans
          }}</view>
          <!--				段落问题-->
          <paragraphAnalysis :paragraph-item="paragraph"></paragraphAnalysis>
        </template>
      </block>
      <!--		问题选项列表-->
      <view v-if="viewAnalysis" style="margin-top: 40rpx">
        <view class="option-list">
          <view
            class="option-item"
            v-for="item in textQuestionList"
            :key="item.id"
          >
            <view class="mark">{{ item.mark }}</view>
            <view class="text">
              <view class="content">{{ item.content }}</view>
              <view class="trans">{{ item.trans }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="placeholder"></view>
    <!--		底部控制按钮-->
		<control-bar :view-analysis="viewAnalysis" @submit="submit" @open-answer-record="openAnswerRecord"></control-bar>
    <!--		答题卡弹框-->
    <view class="popup-placeholder"></view>
    <answerSheet
      :view-analysis="viewAnalysis"
      ref="answer-sheet"
      @submit="submit"
      :currentQuestionIndex.sync="currentQuestionIndex"
    ></answerSheet>
    <vocabularyDetail ref="vocabularyDetail"></vocabularyDetail>
    <!--		题目一览-->
    <answerRecord
      ref="answerRecord"
      :view-analysis="viewAnalysis"
      @change="
        (index) => {
          currentQuestionIndex = index;
        }
      "
    ></answerRecord>
  </view>
</template>

<style scoped lang="scss">
.component {
  padding: 30rpx;
  > .tips {
    font-size: 30rpx;
    color: var(--text-color-light);
    margin-top: 30rpx;
  }
  .topic-paragraph-item {
    font-size: 32rpx;
    line-height: 2;
    margin-top: 20rpx;
  }
  .text-list {
    padding: 30rpx 0;
    .topic {
      background: var(--theme-color);
      width: max-content;
      &.hasDo {
        background: #bad3e7;
      }
      &.correct {
        background: #88debc;
      }
      &.incorrect {
        background: #ff9c9c;
      }
      &.paragraph-topic {
        margin-top: 40rpx;
      }
      &.text-topic {
        text-decoration: underline;
      }
    }
    .paragraph-item {
      &:not(:first-child) {
        margin-top: 40rpx;
      }
      &.emphasis {
        font-weight: bold;
      }
      display: flex;
      flex-wrap: wrap;
      font-size: 34rpx;
      line-height: 1.5;
      .vocabulary {
        color: var(--text-color-theme);
        text-decoration: underline;
      }
      .text {
        display: inline-block;
        //识别空格
        white-space: pre-wrap;
      }
    }
    .paragraph-translate {
      margin-top: 10rpx;
      font-size: 32rpx;
      //color: var(--text-color-light);
			background: var(--theme-color-light);
      line-height: 1.7;
      padding: 0 20rpx;
      border: 4rpx solid var(--border-color);
      border-radius: 16rpx;
    }
    .option-list {
      .option-item {
        display: flex;
        margin-top: 20rpx;
        .mark {
          font-size: 34rpx;
          font-weight: bold;
        }
        .text {
          font-size: 30rpx;
          margin-left: 20rpx;
          .trans {
            color: var(--text-color-light);
          }
        }
      }
    }
  }
  > .placeholder {
    height: calc(150rpx + env(safe-area-inset-bottom));
  }
  .popup-placeholder {
    height: 550rpx;
  }
}
</style>
